<!--
 * @Author: zhayang
 * @LastEditors: zhayang 1063975710@qq.com
 * @Date: 2024-07-04 00:37:25
 * @LastEditTime: 2024-07-07 23:00:54
 * @Description: 单个拖拽
-->
<template>
  <div class="context relative">
    <template v-if="flag">
      <VueDraggableResizable
        v-if="data.src"
        is-draggable
        is-resizable
        :w="data.w"
        :h="data.h"
        :y="data.y"
        :x="data.x"
        aspect-ratio
        content-class="drag-item"
        @dragging="onDrag"
        @resizing="onResize"
      >
        <div
          style="overflow: hidden"
          class="w-100% h-100%"
        >
          <img
            draggable="false"
            class="w-100% h-100%"
            :src="data.src"
            :alt="data.src"
            style="object-fit: contain"
          />
        </div>
      </VueDraggableResizable>
    </template>
  </div>
</template>

<script>
import VueDraggableResizable from 'vue-drag-resize'
export default {
  name: 'Draggable',
  components: {
    VueDraggableResizable
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          x: 0,
          y: 0,
          w: 360,
          h: 640,
          src: ''
        }
      }
    }
  },
  data() {
    return {
      flag: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.flag = true
    })
  },
  methods: {
    onDrag({ top, left, width, height }) {
      // 移动
      this.$emit('updata', left, top)
    },
    onResize({ top, left, width, height }) {
      if (width > 0 && height > 0) {
        this.$emit('updata', left, top, width, height)
      }
    }
  }
}
</script>

<style scoped lang="scss">
// @import 'vue-draggable-resizable/style.css';
img {
  user-select: none;
  pointer-events: none;
}
.vdr.active:before {
  outline: 1px dashed #04d1b8;
}
::v-deep .vdr-stick {
  background: #04d1b8;
  border: 1px solid #04d1b8;
  -webkit-box-shadow: 0 0 2px #04d1b8;
  box-shadow: 0 0 2px #04d1b8;
}
</style>
